<template>
  <div class="nav-bar" :class="[store.getters.getLayout.layoutMode]">
    <div ref="navTabRef"
         class="nav-tabs flex-max"
         :class="[store.getters.getLayout.layoutMode]"
         @mousewheel="handleWheel($event)">
      <div class="ba-nav-tab f14"
           v-for="(tab, index) in tabs"
           :key="index"
           :class="[tab.path==currentTab.path ? 'active' : '',store.getters.getLayout.layoutMode]"
           @click="jump(tab)">
        {{tab.meta.title}}
        <transition name="el-fade-in" v-if="tabs.length>1">
          <span class="iconfont iaiai-close f14 close-icon" @click.stop="closeTab(tab)"></span>
        </transition>
      </div>
    </div>

    <div class="nav-menus" :class="[store.getters.getLayout.layoutMode]">
      <el-popover
          placement="bottom-end"
          :hide-after="0"
          :width="260"
          trigger="click">
        <template #reference>
          <div class="admin-info">
            <el-avatar :size="25" fit="fill">
              <img :src="$getAvatar(avatar)" class="img-cover" />
            </el-avatar>
            <div class="admin-name">{{name}}</div>
          </div>
        </template>
        <div>
          <div class="admin-info-base">
            <el-avatar :size="70" fit="fill">
              <img :src="$getAvatar(avatar)" class="img-cover" />
            </el-avatar>
            <div class="admin-info-other">
              <div class="admin-info-name">{{name}}</div>
              <div class="admin-info-lasttime">2024-06-16 22:12:54</div>
            </div>
          </div>
          <div class="admin-info-footer">
            <el-button @click="showProfile" type="primary" plain>个人资料</el-button>
            <el-button @click="logout" type="danger" plain>注销</el-button>
          </div>
        </div>
      </el-popover>

      <el-dropdown
          class="nav-menu-item"
          size="large"
          placement="bottom"
          trigger="click"
          :hide-on-click="true">
        <div class="nav-menu-item">
          <span class="iconfont iaiai-ic-translate-CN1 f20 c-0" />
        </div>
        <template #dropdown>
          <el-dropdown-menu class="dropdown-menu-box">
            <el-dropdown-item>中文简体</el-dropdown-item>
            <el-dropdown-item>English</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <div class="nav-menu-item" @click="onFullScreen">
        <span class="iconfont f20" :class="[isFullScreen ? 'iaiai-compress' : 'iaiai-expend']" />
      </div>

      <div class="nav-menu-item" @click="showConfig">
        <span class="iconfont iaiai-setting3 f17" />
      </div>
    </div>

    <profile ref="profileComp"/>
    <configView ref="configComp" />
  </div>
</template>

<script lang="ts" setup>
import {RouteLocationNormalized, useRoute, useRouter} from "vue-router"
import {inject, onMounted, ref} from "vue"
import profile from './profile.vue'
import {removeToken} from "@/core/util/app_util"
import screenfull from 'screenfull'
import {ElMessage} from "element-plus"
import configView from "./config.vue"
import {useStore} from 'vuex'

const store = useStore()    //获取store对象
const $api = inject('$api')
const $post = inject('$post')
const tabs = ref<RouteLocationNormalized>([])  //RouteLocationNormalized
const currentTab = ref<RouteLocationNormalized>()  //RouteLocationNormalized
const router = useRouter()
const route = useRoute()
const name = ref("匿名")
const avatar = ref("")
const isFullScreen = ref(false)

const profileComp = ref(null)
const configComp = ref(null)
const navTabRef = ref(null)

onMounted(()=>{
  addTab(route)

  router.beforeEach((to: RouteLocationNormalized) => {
    addTab(to)
  })

  $post($api.profileDetail).then((res:any)=>{
    name.value = res.data.result.user.name
    avatar.value = res.data.result.user.avatar
  })
})

function addTab(to: RouteLocationNormalized){
  var tab = {
    "path":to.path,
    "name":to.name,
    "meta":to.meta,
  }

  currentTab.value = tab

  let bol = false
  for(let i=0;i<tabs.value.length;i++){
    if(tabs.value[i].path===to.path){
      bol = true
    }
  }

  if(!bol) {
    tabs.value.push(tab)
  }
}

function closeTab(tab:RouteLocationNormalized){
  if(currentTab.value.path !== tab.path) {
    for (var i = 0; i < tabs.value.length; i++) {
      if (tabs.value[i] == tab) {
        tabs.value.splice(i, 1)
        break
      }
    }
    return
  }

  var index = 0
  for (i = 0; i < tabs.value.length; i++) {
    if (tabs.value[i] == tab) {
      index = i
      break
    }
  }

  if(index==0){
    //如果是第一个
    if(tabs.value.length==1){
      return
    }
    tabs.value.splice(index, 1)
    jump(tabs.value[index])
    return
  }
  if(index>=(tabs.value.length-1)){
    //说明是最后一个，获取前一个
    tabs.value.splice(index, 1)
    jump(tabs.value[index-1])
    return
  }

  tabs.value.splice(index, 1)
  jump(tabs.value[index])
}

function jump(to:RouteLocationNormalized){
  router.push(to.path)
}

function logout(){
  $post($api.logout).then((res)=>{
    //删除路由
    for (let r of router.getRoutes()) {
      if(r.meta!=null && r.meta.addtab!=null && r.meta.addtab){
        router.removeRoute(r)
      }
    }

    removeToken()
    router.push("/login")
  }).catch((err:any)=>{
    //删除路由
    for (let r of router.getRoutes()) {
      if(r.meta!=null && r.meta.addtab!=null && r.meta.addtab){
        router.removeRoute(r)
      }
    }

    removeToken()
    router.push("/login")
  })
}

//全屏
function onFullScreen(){
  if (!screenfull.isEnabled) {
    ElMessage.warning('布局，不支持全屏')
    return false
  }

  screenfull.toggle()
}

screenfull.on('change', () => {
  isFullScreen.value = screenfull.isFullscreen
})

function showProfile(){
  profileComp.value.showComp()
}

function showConfig(){
  configComp.value.showComp()
}

function handleWheel(event:any){
  // 阻止默认的滚动行为
  event.preventDefault();
  // 根据事件的deltaY值判断滚动方向
  const delta = event.deltaY > 0 ? -10 : 10; // 根据需要设置滚动的步长
  // 滚动容器
  navTabRef.value.scrollLeft += delta;
}
</script>

<style lang="scss" scoped>
.nav-bar {
  display: flex;
  height: 50px;
  width: 100%;
  overflow-x: auto;

  .nav-menus{
    border-radius: 4px;
    display: flex;
    flex-direction: row;

    background-color: #ffffff;

    .nav-menu-item {
      height: 100%;
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .nav-menu-icon {
        box-sizing: content-box;
      }
      &:hover {
        background-color: #f5f5f5;

        .iconfont {
          animation: twinkle 0.3s ease-in-out;
        }
      }
    }

    .admin-info {
      display: flex;
      height: 100%;
      padding: 0 10px;
      align-items: center;
      cursor: pointer;
      user-select: none;

      .admin-name {
        padding-left: 6px;
        white-space: nowrap;
      }
    }

    .admin-info:hover, .admin-info.hover {
      background-color: #f5f5f5;
    }
  }
  .nav-menus.Default{
    height: 40px;
    margin-left: 20px;
    box-shadow: 0 0 12px rgba(0, 0, 0, .12);
  }
  .nav-menus.Classic,.nav-menus.Streamline,.nav-menus.Double{
    height: 50px;
  }

  .nav-tabs {
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;

    &::-webkit-scrollbar{
      display: none;
    }

    &:hover {
      &::-webkit-scrollbar-thumb:hover {
        background: #c8c9cc;
      }
    }

    .ba-nav-tab {
      //white-space: nowrap;
      margin: 0 10px 0 0;
      flex:none;

      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      cursor: pointer;
      z-index: 1;
      user-select: none;
      opacity: 0.7;
      color: #000000;

      .close-icon {
        width: 17px;
        height: 17px;
        margin: 0 0 0 4px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .close-icon:hover {
        background: #3f6ad8;
        border-radius: 50%;
        color: #ffffff !important;
      }
    }

    .ba-nav-tab.Default{
      height: 40px;
      border-radius: 4px;

      &.active {
        color: #000000;
        box-shadow: 0 0 12px rgba(0, 0, 0, .12);
        background-color: #ffffff;
      }
      &:hover {
        opacity: 1;
      }
    }
    .ba-nav-tab.Classic,.ba-nav-tab.Streamline,.ba-nav-tab.Double{
      height: 50px;
      border-radius: 0px;

      &.active {
        color: #000000;
        background-color: #f5f5f5;
      }
      &:hover {
        opacity: 1;
      }
    }

    .ba-nav-tab.active {
      .close-icon {
        color: #000000;
      }
    }
  }
  .nav-tabs.Default{
    border-radius: 4px;
  }
  .nav-tabs.Classic,.nav-tabs.Streamline,.nav-tabs.Double{
    background-color: white;
  }
}

.admin-info-base {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 10px;

  .admin-info-other {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    .admin-info-name {
      font-size: 18px;
    }
  }
}
.admin-info-footer {
  padding: 10px 0;
  margin: 0 -12px -12px -12px;
  display: flex;
  justify-content: space-around;
}

@keyframes twinkle {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
</style>
